﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="incluirChamado.aspx.cs" Inherits="projetoFinal.pages.chamado.incluirChamado" %>
<%@ Register src="../includes/menuLeft.ascx" tagname="menuLeft" tagprefix="menuEsquerda" %>
<%@ Register src="../includes/menuTop.ascx" tagname="menuTop" tagprefix="menuTopo" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>ProAdmin</title>
		<!--// FOLLOWING SCRIPT IS FOR PNG FIX IE5.5/IE6-->
		<!--[if lt IE 7]>
		<script defer type="text/javascript" src="../js/pngfix.js"></script> 
		<![endif]--> 
		<link href="../css/styles.css" rel="stylesheet" type="text/css" />
        <script src="../js/valida.js" type="text/javascript"></script>
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
        <script type="text/javascript">
            var geocoder, location1, location2;
            var point1, point2;
            var j = 0;
            var strAddress2;
            var iDistance2;
            var arrCollectionPoints = new Array();
            var arrPrestadores = new Array();
            var iDelay = 0;
            var strEndereco = null;
            var strNumero = null;
            var strCidade = null;
            var strUF = null;
            var strFormatedAddress = null;


            //Função que preenche as variáveis com o endereço preenchido
            function setSearchValues() {                
                strEndereco = document.getElementById('tabChamados_tabPasso2_txtEndereco').value;
                strNumero = document.getElementById('tabChamados_tabPasso2_txtNumero').value;
                strCidade = document.getElementById('tabChamados_tabPasso2_txtCidade').value;
                strUF = document.getElementById('tabChamados_tabPasso2_selUF').value;
                strFormatedAddress = strEndereco + ", " + strNumero + ", " + strCidade + ", " + strUF;
            }

            //Funcção que seta o valor de um campo hidden com o código do prestador de serviço selecionado
            function setCodOperador(iCodPrestador) 
            {
                document.getElementById("tabChamados_tabPasso3_hdnCodigoPrestador").value = parseInt(iCodPrestador);                
            }

            //Funcção que verifica a TAB que está ativa no momento para chamar a função de exibição do mapa e o cálculo das menores rotas
            function onTabChanged() {
                //Se for a terceira tab                
                var index = $find("tabChamados").get_activeTabIndex();

                if (index == 2) {
                    //Preenche as variáveis com o endereço do chamado
                    setSearchValues();
                    //Chama a função que calcula as distâncias
                    main();
                }
            }

            //Objeto que guardará as informações dos pontos		
            function pointInfo() {
                this.codCadastro = -1;
                this.latitude = 0;
                this.longitude = 0;
                this.distance = 0;
                this.address = null;
            }


            //Cria o método sortAsc para o objeto Array
            Array.prototype.sortAsc = function (field) {
                if (field.toString().toUpperCase() == 'DISTANCE') {
                    var iValueOne = 0;
                    for (var i = 0; i < this.length; i++) {
                        for (var j = 0; j < (this.length - 1); j++) {
                            if (parseFloat(this[j][field]) > parseFloat(this[j + 1][field])) {
                                iValueOne = this[j];
                                this[j] = this[j + 1];
                                this[j + 1] = iValueOne;
                            }
                        }
                    }
                } else {
                    this.sort();
                }
            }

            //Cria o método remove para o objeto Array
            Array.prototype.remove = function (from, to) {
                from > this.length ? from = this.length : from = from;
                var rest = this.slice((to || from) + 1 || this.length);
                this.length = from < 0 ? this.length + from : from;
                return this.push.apply(this, rest);
            }


            //Inicializa o objeto GClientGeocoder
            function initialize() {
                geocoder = new GClientGeocoder();
            }

            //Função principal-----------------
            function main() {                
                //Busca todos os endereços de prestadores de serviços                
                var strPrestadores = document.getElementById('tabChamados_tabPasso3_hdnEnderecoPrestador').value;
                //Variável que guardará o endereço do prestador de serviço
                var strDestinyLocation = null;
                //Variável que guardará o código do prestador de serviço
                var iCodLocation = -1;

                //Cria array com todos os prestadores de serviço para verificar as 5 menores distâncias ORIGEM -> DESTINO            
                arrPrestadores = strPrestadores.split(';');
                //Percorre o array de prestadores de serviço, criando objetos que guardarão todas as distâncias dos prestadores de serviço até o segurado
                for (var i = 0; i < arrPrestadores.length; i++) {
                    //Chama a função que calcula a distância entre dois pontos [ORIGEM -> DESTINO]
                    if (arrPrestadores[i].toString() != "") {
                        //Variável que guardará o endereço do prestador de serviço
                        strDestinyLocation = arrPrestadores[i].toString().substring(0, arrPrestadores[i].toString().lastIndexOf("|"));
                        //Variável que guardará o código do prestador de serviço
                        iCodLocation = arrPrestadores[i].toString().substring(arrPrestadores[i].toString().lastIndexOf("|")+1);
                        //Efetua a chamada para função que calcula a distância entre dois pontos [ORIGEM -> DESTINO]
                        showLocation(strDestinyLocation, iCodLocation);
                    }
                }
            }
            //Fim Função Principal------------

            function createBalloonInformation(marker, address, distance) {
                GEvent.addListener(marker, 'click', function () {
                    // Quando o ponto é clicado, o balão informativo é exibido                        
                    marker.openInfoWindowHtml('<strong> Prestador de serviço: </strong><br/>' + address.toString() + ' -<strong> Distância: </strong>' + distance.toString() + ' km<br/>');
                })
            }

            function showLocation(strDestinyLocation, iCodLocation) {
                //Primeiro ponto
                geocoder.getLocations(strFormatedAddress, function (response) {
                    if (response.Status.code == 200) {
                        location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

                        //Segundo ponto		            
                        geocoder.getLocations(strDestinyLocation, function (response) {
                            if (response.Status.code == 200) {
                                location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

                                //Calcula a distância entre dois pontos
                                try {
                                    point1 = new GLatLng(location1.lat, location1.lon);
                                    point2 = new GLatLng(location2.lat, location2.lon);
                                    var miledistance = point1.distanceFrom(point2, 3959).toFixed(1);
                                    var kmdistance = (miledistance * 1.609344).toFixed(1);

                                    //Instancia um novo objeto do tipo pointInfo
                                    var objPointInfo = new pointInfo();
                                    //Preenche o objeto com o código do prestador de serviço
                                    objPointInfo.codCadastro = parseInt(iCodLocation);
                                    //Preenche o objeto com os dados do endereço							
                                    objPointInfo.latitude = location2.lat;
                                    objPointInfo.longitude = location2.lon;
                                    objPointInfo.address = location2.address;
                                    objPointInfo.distance = kmdistance;
                                    arrCollectionPoints.push(objPointInfo);

                                    if (arrPrestadores.length == arrCollectionPoints.length) {
                                        //Ordena o array com as informações de distância dos pontos (ordem crescente)
                                        arrCollectionPoints.sortAsc('distance');

                                        //Obtém as 5 menores distâncias		                            
                                        arrCollectionPoints.remove(5, -1);

                                        //Exibe os dados dos 5 prestadores que estão mais perto do segurado
                                        var strChecked = null;
                                        document.getElementById("divDistance").innerHTML = "";
                                        for (var i = 0; i < arrCollectionPoints.length; i++) {
                                            (i == 0) ? strChecked = "checked" : strChecked = "";
                                            document.getElementById("divDistance").innerHTML += '<input type=\'radio\' name=\'radListagem\' id=\'radListagem\' value="' + arrCollectionPoints[i].codCadastro.toString() + '"  onClick=\'javascript:setCodOperador(this.value);\'/><strong> Endereço: </strong>' + arrCollectionPoints[i].address.toString() + ' - <strong>Distância: </strong>' + arrCollectionPoints[i].distance.toString() + ' km<br/>';
                                            document.getElementById("radListagem").setAttribute("checked", strChecked);
                                            if (i == 0) {
                                                //Seta o hidden com o primeiro
                                                setCodOperador(arrCollectionPoints[i].codCadastro.toString());
                                            }
                                        }

                                        //Exibe o mapa com os 5 pontos marcados e com o local do segurado
                                        var map = new GMap2(document.getElementById("map_canvas"));

                                        //Seta os pontos no mapa            
                                        var baseIcon = new GIcon();
                                        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                                        baseIcon.iconSize = new GSize(20, 34);
                                        baseIcon.shadowSize = new GSize(37, 34);
                                        baseIcon.iconAnchor = new GPoint(9, 34);
                                        baseIcon.infoWindowAnchor = new GPoint(9, 2);
                                        baseIcon.infoShadowAnchor = new GPoint(18, 25);
                                        var icon = new GIcon(baseIcon);
                                        icon.image = '../images/icons/markerBlue.png';

                                        var marker = new GMarker(point1);
                                        //Adiciona um balão informativo com os dados do ponto                                        
                                        GEvent.addListener(marker, 'click', function () {
                                            // Quando o ponto é clicado, o balão informativo é exibido
                                            marker.openInfoWindowHtml('<strong>Localização do segurado: </strong>' + strFormatedAddress);
                                        });
                                        map.addOverlay(marker);

                                        for (var i = 0; i < arrCollectionPoints.length; i++) {
                                            strAddress2 = arrCollectionPoints[i].address.toString();
                                            iDistance2 = arrCollectionPoints[i].distance.toString();

                                            point2 = new GLatLng(arrCollectionPoints[i].latitude, arrCollectionPoints[i].longitude);
                                            eval('var marker_' + i + '= new GMarker(point2, icon);');
                                            //Adiciona um balão informativo com os dados do ponto             
                                            createBalloonInformation(eval('marker_' + i), strAddress2, iDistance2);
                                            map.addOverlay(eval('marker_' + i));
                                        }

                                        //Exibe o mapa
                                        map.setCenter(point1, 8);
                                        map.setUIToDefault();
                                        map.setMapType(G_NORMAL_MAP);
                                    }
                                }
                                catch (error) {
                                    alert(error);
                                }
                            } else if (response.Status.code == 620) {
                                //Incrementa o tempo de espera entre requisições
                                iDelay += 1000;
                                //Espera para a nova requisição
                                window.setTimeout("showLocation('" + strDestinyLocation + "', '" + iCodLocation + "')", iDelay);
                            } else {
                                alert("Sorry, we were unable to geocode the second address");
                                return;
                            }

                        });
                    } else if (response.Status.code == 620) {
                        //Incrementa o tempo de espera entre requisições
                        iDelay += 1000;
                        //Espera para a nova requisição
                        window.setTimeout("showLocation('" + strDestinyLocation + "', '" + iCodLocation + "')", iDelay);
                    } else {
                        $find("tabChamados").set_activeTabIndex(1);
                        if (j == 0) {
                            alert("Endereço do segurado não foi localizado");
                            j += 1;
                        }
                        return;
                    }
                });
            } 
        </script>
        <style type="text/css">
            .tituloCampos { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;	line-height: 21px; padding: 5px 5px 5px 5px; background-image: url(../images/table_bg.jpg); width:440px; }
        </style>
	</head>                                                                
	<body id="body" runat="server">
	    <form id="form1" runat="server">
		    <!--// Horisontal submenu edit starts -->
		    <div class="bodytext" id="submenu"></div>
		    <!--// Horizontal submenu edit ends -->
		    <menuTopo:menuTop ID="menuTopo" runat="server" />
		    <!--// leftcolumn edit starts -->
		    <!--// Mainnavigation edit starts -->
		    <div id="leftcolumn">
			    <menuEsquerda:menuLeft ID="menuEsquerda" runat="server" />
		    </div>
		    <!--// leftcolumn edit ends -->
		    <!--// Copyright ends -->
		    <!--// leftcolumn ends -->
		    <!--// Content starts -->
		    <div id="content"> 
			    <table width="772" border="0">
				    <tr>
					    <th height="58" valign="middle" bgcolor="#E5E5E5" scope="col"><h1 align="left"><asp:Literal ID="lblTitulo" runat="server" /></h1></th>
				    </tr>
                    <tr>
						<td colspan="4" style="padding-left:20px;padding-right:5px;">
							<div id="information" runat="server" visible="false"> <!--// information message -->
								<table width="450" cellpadding="0" cellspacing="12">
									<tr>
										<td width="52"><div align="center"><img src="../images/icons/information.png" alt="information" width="18" height="18" /></div></td>
										<td width="388" class="bodytext style4"><strong><asp:Literal ID="lblTitleInformation" runat="server" /></strong> <asp:Literal ID="lblMessageInformation" runat="server" /></td>
									</tr>
								</table>
							</div>
							<br />
						</td>
					</tr>
				    <tr>
					    <td style="padding-left:20px;padding-right:5px;">
                            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="false"/>
                            <br />                            
						    <asp:TabContainer ID="tabChamados" runat="server" ActiveTabIndex="0" onactivetabchanged="tabChamados_ActiveTabChanged" OnClientActiveTabChanged="onTabChanged">
                                <asp:TabPanel ID="tabPasso1" runat="server" HeaderText="Passo 1">
                                    <ContentTemplate>
                                        <asp:UpdatePanel ID="updatePanel" runat="server">
                                            <ContentTemplate>
                                                <table width="746" cellspacing="0">
                                                    <tr>
						                                <td><div class="tituloCampos">Digite a placa do veículo para localizar o associado:</div></td>
					                                </tr>
                                                    <tr>
										                <td><input name="txtPlaca" type="text" class="fields" id="txtPlaca" runat="server" maxlength="8" value="" size="80" /></td>
									                </tr>
                                                    <tr>
                                                        <td><asp:Button ID="btnProximo_Passo1" runat="server" CssClass="button" Text="Procurar" onclick="btnProximo_Passo1_Click" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td style="height:10px;"></td>
                                                    </tr>
                                                </table>                                                
                                                <div runat="server" id="divMensagemPasso1" visible="false">
                                                    <h4><asp:Literal ID="msgPasso1" runat="server"/></h4>
                                                </div>
                                                <asp:DataList ID="tblListagemClientes" Width="650" CellSpacing="0" runat="server" OnItemDataBound="tblListagemClientes_ItemDataBound" OnItemCommand="tblListagemClientes_ItemCommand">
                                                    <AlternatingItemTemplate>
                                                        <input type="hidden" name="hdnCodAssociadoCarro" id="hdnCodAssociadoCarro" value="" runat="server" />
                                                        <tr>
						                                    <td width="37" bgcolor="#E5E5E5" height="40" class="bodytext_table"><asp:ImageButton ID="lnkSelecionar" runat="server" CommandName="selecionar" ImageUrl="../images/icons/select.png" AlternateText="Selecionar e continuar" Width="18" Height="18" BorderWidth="0" /></td>
						                                    <td height="40" bgcolor="#E5E5E5" class="bodytext_table">
							                                    <div align="left">
								                                    <blockquote>
									                                    <blockquote><asp:literal id="lblNome" runat="server" /></blockquote>
								                                    </blockquote>
							                                    </div>
						                                    </td>
						                                    <td height="40" bgcolor="#E5E5E5" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblCPF" runat="server" /></a></div></td>
                                                            <td height="40" bgcolor="#E5E5E5" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblMarca" runat="server" /></a></div></td>
                                                            <td height="40" bgcolor="#E5E5E5" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblCarro" runat="server" /></a></div></td>
					                                    </tr>
                                                    </AlternatingItemTemplate>
                                                    <FooterTemplate>
                                                        <tr>
						                                    <td colspan="2" height="20" class="title_table">
							                                    <div style="padding-left:20px;">
							                                    </div>
						                                    </td>
						                                    <td colspan="3" height="20" class="title_table" scope="col">
        							
						                                    </td>
					                                    </tr>
                                                    </FooterTemplate>
                                                    <HeaderTemplate>
                                                        <tr>
						                                    <th width="37" height="40" class="title_table" scope="col">
							                                    <div align="center" class="tabletitles">
								                                    <div align="left"></div>
							                                    </div>
						                                    </th>
						                                    <th width="147" height="40" class="title_table" scope="col">
							                                    <div align="center" class="tabletitles">
								                                    <div align="left">Nome</div>
							                                    </div>
						                                    </th>
						                                    <th width="161" height="40" class="title_table" scope="col">
							                                    <div align="center" class="tabletitles">
								                                    <div align="left">CPF</div>
							                                    </div>
						                                    </th>
                                                            <th width="161" height="40" class="title_table" scope="col">
							                                    <div align="center" class="tabletitles">
								                                    <div align="left">Marca</div>
							                                    </div>
						                                    </th>
                                                            <th width="161" height="40" class="title_table" scope="col">
							                                    <div align="center" class="tabletitles">
								                                    <div align="left">Modelo</div>
							                                    </div>
						                                    </th>
					                                    </tr>
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <input type="hidden" name="hdnCodAssociadoCarro" id="hdnCodAssociadoCarro" value="" runat="server" />
                                                        <tr>
						                                    <td width="37" height="40" class="bodytext_table"><asp:ImageButton ID="lnkSelecionar" runat="server" CommandName="selecionar" ImageUrl="../images/icons/select.png" AlternateText="Selecionar e continuar" Width="18" Height="18" BorderWidth="0" /></td>
						                                    <td height="40" class="bodytext_table">
							                                    <div align="left">
								                                    <blockquote>
									                                    <blockquote><asp:literal id="lblNome" runat="server" /></blockquote>
								                                    </blockquote>
							                                    </div>
						                                    </td>
						                                    <td height="40" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblCPF" runat="server" /></a></div></td>
                                                            <td height="40" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblMarca" runat="server" /></a></div></td>
                                                            <td height="40" class="bodytext_table"><div align="left"><a href="#"><asp:literal id="lblCarro" runat="server" /></a></div></td>
					                                    </tr>
                                                    </ItemTemplate>
                                                </asp:DataList>
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </ContentTemplate>
                                </asp:TabPanel>
                                <asp:TabPanel ID="tabPasso2" runat="server" HeaderText="Passo 2">
                                    <ContentTemplate>
                                        <h4><br />Digite os dados de localização do associado abaixo!<br /><br /></h4>
                                        <table width="746" cellspacing="0">
                                            <tr>
						                        <td><div class="tituloCampos">Endereço:</div></td>
					                        </tr>
                                            <tr>
										        <td><input name="txtEndereco" type="text" class="fields" id="txtEndereco" runat="server" maxlength="100" value="" size="80" /></td>
									        </tr>
                                            <tr>
						                        <td><div class="tituloCampos">Número:</div></td>
					                        </tr>
                                            <tr>
										        <td><input name="txtNumero" type="text" class="fields" id="txtNumero" runat="server" maxlength="8" value="" size="80" /></td>
									        </tr>
                                            <tr>
						                        <td><div class="tituloCampos">Cidade:</div></td>
					                        </tr>
                                            <tr>
										        <td><input name="txtCidade" type="text" class="fields" id="txtCidade" runat="server" maxlength="50" value="" size="80" /></td>
									        </tr>
                                            <tr>
						                        <td><div class="tituloCampos">Estado:</div></td>
					                        </tr>
                                            <tr>
										        <td>
                                                    <div style="padding-left:0px;">
                                                        <select name="selUF" id="selUF" runat="server">
						                                    <option value="">Selecione...</option>
						                                    <option value="AC">Acre</option> 
									                        <option value="AL">Alagoas</option>
									                        <option value="AP">Amapá</option>
									                        <option value="AM">Amazonas</option>
									                        <option value="BA">Bahia</option>
									                        <option value="CE">Ceará</option>
									                        <option value="DF">Distrito Federal</option>
									                        <option value="ES">Espírito Santo</option>
									                        <option value="GO">Goiás</option>
									                        <option value="MA">Maranhão</option>
									                        <option value="MT">Mato Grosso</option>
									                        <option value="MS">Mato Grosso do Sul</option>
									                        <option value="MG">Minas Gerais</option>
									                        <option value="PA">Pará</option>
									                        <option value="PB">Paraíba</option>
									                        <option value="PR">Paraná</option>
									                        <option value="PE">Pernambuco</option>
									                        <option value="PI">Piauí</option>
									                        <option value="RJ">Rio de Janeiro</option>
									                        <option value="RN">Rio Grande do Norte</option>
									                        <option value="RS">Rio Grande do Sul</option>
									                        <option value="RO">Rondônia</option>
									                        <option value="RR">Roraima</option>
									                        <option value="SC">Santa Catarina</option>
									                        <option value="SP">São Paulo</option>
									                        <option value="SE">Sergipe</option>
									                        <option value="TO">Tocantins</option>
								                        </select>
                                                    </div>
                                                </td>
									        </tr>
                                            <tr>
						                        <td><div class="tituloCampos">Tipo de problema:</div></td>
					                        </tr>
                                            <tr>
										        <td>
                                                    <div style="padding-left:0px;">
                                                        <select name="selTipoProblema" id="selTipoProblema" runat="server">
						                                    <option value="">Selecione...</option>
                                                        </select>
                                                    </div>
                                                </td>
									        </tr>
                                            <tr>
						                        <td><div class="tituloCampos">Descrição:</div></td>
					                        </tr>
                                            <tr>
										        <td><textarea id="txtDescricao" name="txtDescricao" class="fields" rows="10" cols="10" style="height: 80px; width:430px;" runat="server"></textarea></td>
									        </tr>
                                            <tr>
                                                <td style="height:10px;"></td>
                                            </tr>
                                            <tr>
                                                <td><asp:Button ID="btnProximo_Passo2" runat="server" CssClass="button" Text="Continuar" OnClick="btnProximo_Passo2_Click"/></td>
                                            </tr>
                                            <tr>
                                                <td style="height:10px;"></td>
                                            </tr>
                                        </table>
                                        <div runat="server" id="divMensagemPasso2" visible="false">
                                            <h4><asp:Literal ID="msgPasso2" runat="server"/></h4>
                                        </div>
                                    </ContentTemplate>
                                </asp:TabPanel>
                                <asp:TabPanel ID="tabPasso3" runat="server" HeaderText="Passo 3">
                                    <ContentTemplate>
                                        <input type="hidden" name="hdnEnderecoPrestador" id="hdnEnderecoPrestador" value="" runat="server" />
                                        <input type="hidden" name="hdnCodigoPrestador" id="hdnCodigoPrestador" value="" runat="server" />
                                        <div id="map_canvas" style="width: 700px; height: 400px"></div>
		                                <div id="divDistance" style="width: 700px; height: 265px"></div>                                        
                                        <asp:Button ID="btnIncluirChamado" runat="server" CssClass="button" Text="Incluir" OnClick="btnIncluirChamado_Click" />
                                    </ContentTemplate>
                                </asp:TabPanel>                                
                            </asp:TabContainer>
						    <br />						    
						    <br /><br /><br />
					    </td>
				    </tr>
			    </table>
		    </div>
		    <!--// Content ends -->
        </form>
	</body>
</html>